<template>
  <div id="actor"
       v-loading="loading"
       element-loading-text="加载中..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <header>
      <div class="left">
        <el-button type="primary"
                   size="medium"
                   icon="el-icon-plus"
                   @click="$router.push('add')"
                   style="padding: 10px 12px;">新增</el-button>
        <el-input size="medium"
                  placeholder="关键字"
                  style="margin:0 5px;"
                  v-model="searchText"></el-input>

        <!-- <el-button icon="el-icon-search"
                   style="padding: 10px 12px;"
                   size="medium">搜索</el-button> -->
        <el-button-group style="display:flex">
          <el-button icon="el-icon-search"
                     style="padding: 10px 12px;"
                     @click="loadData"
                     size="medium">搜索</el-button>
          <!-- <el-button icon="el-icon-arrow-down"
                     style="padding: 10px 12px;"
                     size="medium"></el-button> -->
        </el-button-group>
      </div>
      <el-button-group>
        <el-button icon="el-icon-document"
                   size="medium"
                   @click="handleTemplateDownload"
                   style="padding: 10px 12px;">模板下载</el-button>
        <el-button icon="el-icon-edit"
                   style="padding: 10px 12px;"
                   @click="handleImportClick"
                   size="medium">导入</el-button>
        <el-button icon="el-icon-download"
                   style="padding: 10px 12px;"
                   @click="handleExportClick"
                   size="medium">导出</el-button>
      </el-button-group>
      <input ref="file"
             @change="handleFileChange"
             type="file"
             style="display:none">
      <batchTag :number="selections.length"
                @delete="handleDelete"></batchTag>
    </header>
    <main>
      <el-table :data="tableData"
                header-cell-class-name="table-header"
                border
                @sort-change="handleSort"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column type="selection"
                         align="center"
                         width="55"></el-table-column>
        <el-table-column type="index"
                         label="序号"
                         width="50"
                         align="center"
                         :index="computeTableIndex" />
        <el-table-column prop="name"
                         align="center"
                         sortable="custom"
                         show-overflow-tooltip
                         label="名称">
        </el-table-column>
        <el-table-column prop="type"
                         sortable="custom"
                         align="center"
                         width="100"
                         label="类型">
        </el-table-column>
        <el-table-column prop="birthday"
                         sortable="custom"
                         sort-by="birthday"
                         align="center"
                         width="140"
                         label="出生年月">
          <template slot-scope="scope">
            <!-- <span>{{scope.row.birthday}}</span> -->
            <div>{{scope.row.birthday&&new Date(scope.row.birthday).format('yyyy-MM')|| ''}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="unit"
                         sortable="custom"
                         align="center"
                         label="单位">
        </el-table-column>
        <el-table-column prop="note"
                         sortable="custom"
                         show-overflow-tooltip
                         align="center"
                         label="备注">
        </el-table-column>
        <!-- <el-table-column prop="extra"
                         sortable
                         align="center"
                         label="其他">
        </el-table-column> -->
        <el-table-column align="center"
                         width="80"
                         label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text">详情</el-button> -->
            <el-button type="text"
                       @click="handleEdit(scope.row.id)">编辑</el-button>
            <!-- <el-button type="text"
                       @click="$router.push('add')">新增</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer>
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pagination.page"
                     :page-size="pagination.size"
                     :total="pagination.total"
                     :page-sizes="[10, 20, 30]"
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </footer>
    <el-dialog :visible.sync="visible"
               title="演职人员新增"
               width="400px">
      <el-form label-width="40px"
               style="overflow: hidden;">
        <el-form-item label="类型">
          <el-select v-model="addObj.type"
                     style="width:100%">
            <el-option label="合唱团"
                       value="1"></el-option>
            <el-option label="演员"
                       value="2"></el-option>
            <el-option label="剪辑"
                       value="3"></el-option>
            <el-option label="摄影师"
                       value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input style="width:100%"></el-input>
        </el-form-item>
        <!-- <el-form-item class="form-item"
                      label="演出地点">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="form-item"
                      label="演出时间">
          <el-date-picker v-model="addObj.date"
                          style="width:100%"
                          type="datetime"
                          placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="form-item"
                      label="演出时长">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="form-item"
                      label="主持人">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="form-item"
                      label="画外音">
          <el-input></el-input>
        </el-form-item> -->
        <el-form-item style="width:100%"
                      class="form-item"
                      label="简介">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <el-form-item style="width:100%"
                      class="form-item"
                      label="其他">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <!-- <el-form-item style="width:100%"
                      class="form-item"
                      label="艺术特点">
          <el-input type="textarea"></el-input>
        </el-form-item> -->
      </el-form>
      <footer>
        <el-button type="primary"
                   size="small">提交</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
import batchTag from '../show/component/batchTag'
import API from '../../api/actor'
import axios from 'axios'

export default {
  components: { batchTag },
  data() {
    return {
      loading: false,
      selections: [],
      searchText: '',
      visible: false,
      tableData: [],
      pagination: {
        page: 1,
        size: 10,
        total: 100
      },
      addObj: {
        type: '',
        name: '',
        address: '',
        long: '',
        host: '',
        aside: '',
        mainSense: '',
        features: '',
        introduction: '',
        note: ''
      },
      sortObj: {}
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    computeTableIndex(index) {
      return (this.pagination.page - 1) * this.pagination.size + index + 1
    },
    handleSort({ column, prop, order }) {
      this.sortObj = {
        field: prop,
        sort: order && order.substr(0, order.length - 6) || ''
      }
      this.handleCurrentChange(1)
    },
    handleExportClick() {
      if (this.selections.length === 0) {
        this.$confirm('默认将全部导出, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const base = process.env.VUE_APP_BASE_API + "/excel/exportActorByIds?ids="
          window.open(base)
          console.log(`export url ${base}`)
        }).catch(() => { });
      } else {
        const base = process.env.VUE_APP_BASE_API + "/excel/exportActorByIds?ids="
        const ids = this.selections.map(s => s.id)
        window.open(base + ids)
        console.log(`export url ${base + ids}`)
      }
    },
    loadData() {
      const param = {
        pageSize: this.pagination.size,
        page: this.pagination.page,
        query: this.searchText,
        ...this.sortObj
      }
      this.loading = true
      API.getActorList(param).then(res => {
        this.loading = false
        this.tableData = res.data.items && res.data.items.map(r => {
          return { ...r, birthday: r.birthday || '' }
        }) || []
        this.pagination.total = res.data.total
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    handleClick() { },
    handleIconClick() {
      console.log(1111)
    },
    handleSizeChange(v) {
      this.pagination.size = v
      this.loadData()
    },
    handleCurrentChange(v) {
      this.pagination.page = v
      this.loadData()
    },
    handleSelectionChange(array) {
      this.selections = array
    },
    handleDelete() {
      this.$confirm('删除所选项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.batchDelete()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    batchDelete() {
      const ids = this.selections.map((s) => s.id)
      API.batchDelete(ids.join(',')).then(() => {
        this.loadData()
      })
    },
    handleEdit(id) {
      this.$router.push({
        path: 'add',
        query: { id }
      })
    },
    handleTemplateDownload() {
      window.open(process.env.VUE_APP_BASE_API + "excel/actordownload")
    },
    handleImportClick() {
      this.$refs.file.value = ''
      this.$refs.file.click()
    },
    handleFileChange(v) {
      // console.log(v)
      const form = new FormData()
      form.append('file', v.target.files[0])
      axios.post(process.env.VUE_APP_BASE_API + '/excel/importActorTemplateData', form).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.loadData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#actor {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  header {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  main {
    padding: 10px 0;
  }
  footer {
    text-align: right;
  }
  .form-item {
    width: calc((99% - 20px) / 2);
    float: left;
  }
  /deep/ .table-header {
    padding: 0 6px;
  }
  /deep/ .el-table td,
  .el-table th {
    padding: 0;
  }
  /deep/ .el-table .cell,
  .el-table th div {
    padding: 6px 0;
  }
  /deep/ .el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
